<template>
  <view class="wrap">
    <view
      style="height: 330upx; background-color: #18c7e1; text-align: center"
      class="bd1"
    >
      <view style="color: #fff; margin: 8% auto 3%">
        <text style="font-size: 120upx">{{ nearData }}</text>
        <text>次/60min</text>
      </view>
      <u-tag
        text="最近一次数据"
        type="success"
        shape="circle"
        bg-color="#18C7E1"
        border-color="#18c7e1"
        color="#fff"
      />
    </view>
    <view class="u-tabs-box bd">
      <u-tabs-swiper
        activeColor="#18C7E2"
        inactive-color="#717171"
        ref="tabs"
        height="120"
        bar-width="100"
        bar-height="1"
        :list="navList"
        class="bd"
        :current="current"
        @change="change"
        :is-scroll="isScroll"
        swiperWidth="750"
        font-size="32"
      ></u-tabs-swiper>
    </view>
    <swiper
      class="swiper-box"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
      disable-touch="true"
    >
      <swiper-item class="swiper-item bd">
        <scroll-view scroll-y style="height: 100%; width: 100%">
          <u-row class="table_title bd t1">
            <u-col span="3" text-align="center">开始时间</u-col>
            <u-col span="3" text-align="center">结束时间</u-col>
            <u-col span="3" text-align="center">点击次数</u-col>
            <u-col span="3" text-align="center">胎动次数</u-col>
          </u-row>
          <view
            v-for="(v, index) in list"
            :key="index"
            class="table_body bd t1"
          >
            <u-row class="table_body_top">
              <u-col span="12">{{ v.date }}</u-col>
            </u-row>
            <u-row
              v-for="(v1, indexs) in v.data"
              :key="index + indexs"
              class="table_body_body"
            >
              <u-col span="3" text-align="center">{{
                v1.startTime.substr(v1.startTime.length - 8)
              }}</u-col>
              <u-col span="3" text-align="center">{{
                v1.endTime.substr(v1.endTime.length - 8)
              }}</u-col>
              <u-col span="3" text-align="center">{{ v1.clickNum }}</u-col>
              <u-col span="3" text-align="center">{{ v1.fetalHeart }}</u-col>
            </u-row>
            <u-row class="table_body_bottom">
              <u-col span="12">预测胎动：{{ v.prediction }}</u-col>
            </u-row>
          </view>
        </scroll-view>
        <image
          class="edit"
          @tap="goAdd"
          src="../../../static/img/3e3b2db473784873887377acebd78fff.png"
          mode="widthFix"
        ></image>
      </swiper-item>
      <swiper-item class="swiper-item bd">
        <scroll-view scroll-x style="height: 100%; width: 100%">
          <view class="qiun bd t1">
            <view class="sli">
              <span><i class="le"></i>预测胎动</span>
            </view>
            <view class="qiun-charts">
              <canvas
                canvas-id="canvasLineA"
                id="canvasLineA"
                :style="{ width: idxpx + 'rpx' }"
                class="charts"
                @touchstart="touchLineA"
              ></canvas>
            </view>
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import uCharts from "@/js_sdk/u-charts/u-charts/u-charts.js";
var canvaLineA = null;
var _self;
export default {
  data() {
    return {
      navList: [
        {
          name: "胎动记录",
        },
        {
          name: "胎动曲线",
        },
      ],
      current: 0,
      swiperCurrent: 0,
      list: [],
      categories: {},
      charts: {
        cWidth: "",
        cHeight: "",
        pixelRatio: 1,
        dataee: {
          categories: [],
          series: [
            {
              name: "预测胎动",
              data: [],
              color: "#18c7e1",
            },
          ],
        },
      },
      nearData: "",
      isScroll: false,
      idxpx: "",
    };
  },
  onLoad() {
    _self = this;
    this.getHeartRecord();
    this.charts.cHeight = uni.upx2px(500);
  },
  onBackPress(e) {
    // uni.switchTab({
    // 	url: '/pages/home/home'
    // });
    uni.navigateTo({
      url: "/pages/main/pregnant/heart-detection",
    });
    return true;
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
    getHeartRecord() {
      let self = this;
      let LineA = {
        categories: [],
        series: [],
      };
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config.get("/heartRate/heartRateList", {}).then((res) => {
        uni.hideLoading();
        if (res.data.code === 200) {
          //console.log(res)
          let idx = "";
          switch (res.data.data.length) {
            case 1:
              idx = res.data.data.length * 45 * 15;
              break;
            case 2:
              idx = res.data.data.length * 36 * 10;
              break;
            case 3:
              idx = res.data.data.length * 45 * 5;
              break;
            case 4:
              idx = res.data.data.length * 35 * 5;
              break;
            case 5:
              idx = res.data.data.length * 28 * 5;
              break;
            default:
              idx = res.data.data.length * 50 * 4;
          }
          this.charts.cWidth = uni.upx2px(idx);
          this.idxpx = idx;
          self.list = res.data.data;

          self.nearData = self.list[0].data[0].fetalHeart;
          self.list.map((item, index) => {
            let num = 0;
            item.data.map((items) => {
              num += items.fetalHeart;
            });
            item.prediction = ((num / item.data.length) * 12).toFixed(0);

            self.categories[index + 1] = item.date;
          });
          self.charts.dataee.categories = self.list.map((item, index) => {
            return "第" + (index + 1) + "次";
          });
          self.charts.dataee.series[0].data = self.list.map((item) => {
            return item.prediction;
          });
          //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
          LineA.categories = this.charts.dataee.categories;
          LineA.series = this.charts.dataee.series;
          self.showLineA("canvasLineA", LineA);
        } else {
          if (res.data.code == "-201") {
            self.config.handleError(res.data);
          } else {
            uni.showToast({
              title: self.config.handleError(res.data),
              icon: "none",
            });
          }
        }
      });
    },
    goAdd() {
      uni.navigateTo({
        url: "/pages/main/pregnant/heart-record-add",
      });
    },
    showLineA(canvasId, chartData) {
      canvaLineA = new uCharts({
        $this: _self,
        canvasId: canvasId,
        type: "line",
        fontSize: 11,
        legend: {
          show: false,
        },
        dataLabel: false,
        dataPointShape: true,
        background: "#FFFFFF",
        pixelRatio: _self.charts.pixelRatio,
        categories: chartData.categories,
        series: chartData.series,
        animation: true,
        xAxis: {
          type: "grid",
          gridColor: "#ffffff",
          gridType: "dash",
          dashLength: 7,
        },
        yAxis: {
          gridType: "dash",
          gridColor: "#ffffff",
          axisLineColor: "#ffffff",
          data: [
            {
              format: (val) => {
                return val.toFixed(0);
              },
            },
          ],
        },
        width: _self.charts.cWidth * _self.charts.pixelRatio,
        height: _self.charts.cHeight * _self.charts.pixelRatio,
        extra: {
          line: {
            type: "curve",
          },
          length: {
            position: "top",
          },
        },
      });
    },
    touchLineA(e) {
      let self = this;
      canvaLineA.showToolTip(e, {
        format: function (item, category) {
          return (
            self.categories[
              Number(category.replace("第", "").replace("次", ""))
            ] +
            " " +
            item.name +
            ":" +
            item.data
          );
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
uni-view.u-tabs-box {
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
}

.edit {
  width: 120upx;
  height: 120upx;
  border-radius: 50%;
  background-color: #84e1ef;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 10%;
  bottom: 20%;
}

.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
  margin-bottom: 30rpx;
  position: fixed;
  background-color: #fff;
}

.swiper-box {
  flex: 1;
}

.swiper-item {
  height: 100%;
}

.table_title {
  padding: 10px 0px;
  background: #fff;
}

.table_body {
  background: #fff;
  margin: 10px 0;
}

.table_body_top {
  border-bottom: 1px solid #eee;
  padding: 5px 0 0 5px;
  margin-bottom: 5px;
  color: #999;
}

.table_body_body {
  padding: 3px 0;
}

.table_body_bottom {
  border-top: 1px solid #eee;
  padding: 5px 0 0 5px;
  margin-top: 5px;
  color: #ff63a2;
  line-height: 20px;
}

.qiun-charts {
  width: 750upx;
  height: 500upx;
}

.charts {
  width: 750upx;
  height: 500upx;
}

.qiun {
  padding-top: 80rpx;
  background-color: #ffffff;

  .sli {
    padding: 20rpx;
    position: fixed;
    margin-top: -80rpx;

    .le {
      width: 20rpx;
      height: 20rpx;
      display: inline-block;
      border-radius: 50%;
      background-color: #18c7e1;
      margin: 0 20rpx 0 5rpx;
    }
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>